<template>
  <u-popup
    v-model="visible"
    mode="center"
    width="540"
    height="600rpx"
    border-radius="14"
    :mask-close-able="false"
    :z-index="999999"
    @close="onClose"
  >
    <view class="loading-wrap" v-if="loading">
      <u-loading mode="flower"></u-loading>
    </view>
    <template v-else>
      <view class="question" v-for="topic in questionData.topic" :key="topic.id">
        <view class="question-header">
          <u-parse :html="topic.title"></u-parse>
        </view>
        <!-- 音视频 -->
        <div v-if="!$u.test.empty(topic.material)">
          <view
            v-for="(item, index) in topic.material"
            :key="index"
            :class="item.type"
            class="question-player"
          >
            <BaseAudio
              v-if="item.type === 'audio'"
              :fileurl="item.src"
              :index="index"
              :palyIndex="palyIndex"
              @play="handlePlay"
            ></BaseAudio>
            <BaseVideo
              v-else-if="item.type === 'video'"
              :fileurl="item.src"
              :index="index"
              :palyIndex="palyIndex"
              @play="handlePlay"
            >
            </BaseVideo>
          </view>
        </div>
        <view class="question-body">
          <!-- 单选/判断 -->
          <view class="question-radio" v-if="$edu.test.inArray(topic.question_type, [1, 2])">
            <exam-radio-group
              v-model="radio"
              :active-color="globPrimaryColor"
              :disabled-color="globThemeColorDisabled"
              placement="column"
              :disabled="is_answered"
            >
              <exam-radio
                :name="item.id"
                v-for="item in topic.options"
                :key="item.id"
                :custom-style="{ paddingBottom: '40rpx' }"
              >
                <view class="choose-item__option u-clearfix">
                  <view class="lebal">{{ item.key }}.</view>
                  <view class="content">
                    <u-parse :html="item.value"></u-parse>
                  </view>
                </view>
              </exam-radio>
            </exam-radio-group>
          </view>

          <!-- 多选 -->
          <view class="question-select" v-else-if="$edu.test.inArray(topic.question_type, [3, 4])">
            <exam-checkbox-group
              v-model="checkList"
              :active-color="globPrimaryColor"
              :disabled-color="globThemeColorDisabled"
              placement="column"
              :disabled="is_answered"
            >
              <exam-checkbox
                :name="item.id"
                v-for="item in topic.options"
                :key="item.id"
                :custom-style="{ paddingBottom: '48rpx' }"
              >
                <view class="choose-item__option u-clearfix">
                  <view class="lebal">{{ item.key }}.</view>
                  <view class="content">
                    <u-parse :html="item.value"></u-parse>
                  </view>
                </view>
              </exam-checkbox>
            </exam-checkbox-group>
          </view>
        </view>
        <view class="question-answer" v-if="is_answered">
          <span class="label">正确答案：</span>
          <span class="item">{{ correctAnswer(topic.options) }}</span>
        </view>
        <view class="question-analyze" v-if="topic.analyze && is_answered">
          <span class="key">解析:</span>
          <view class="content">
            <u-parse :html="topic.analyze"></u-parse>
          </view>
        </view>
        <view class="question-icon" v-if="is_answered">
          <u-image
            v-if="is_right"
            width="148rpx"
            height="148rpx"
            src="@/pageCourse/static/images/sure.png"
          ></u-image>
          <u-image
            v-else
            width="148rpx"
            height="148rpx"
            src="@/pageCourse/static/images/wrong.png"
          ></u-image>
        </view>
        <view class="question-btn">
          <template v-if="is_answered">
            <template v-if="answerPass == 1 || answerCoiledWrongCount == maxAnswerCount">
              <view class="btn" @click="handletContinue">我知道了，继续学习</view>
            </template>
            <view v-else class="btn" @click="handletNextQuestion">下一题</view>
          </template>
          <view v-else class="btn" @click="handletQuestionAnswer(topic)">提交</view>
        </view>
      </view>
    </template>
  </u-popup>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import examRadioGroup from './components/exam-radio-group.vue'
import examRadio from './components/exam-radio.vue'
import examCheckboxGroup from './components/exam-checkbox-group.vue'
import examCheckbox from './components/exam-checkbox.vue'
import BaseAudio from './components/baseAudio'
import BaseVideo from './components/baseVideo'
export default {
  name: 'Question',
  components: {
    examRadioGroup,
    examRadio,
    examCheckboxGroup,
    examCheckbox,
    BaseAudio,
    BaseVideo,
  },
  props: {
    course_id: {
      type: Number,
      default: 0,
    },
    course_type: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      visible: false,
      loading: false,
      radio: '', // 单选
      checkList: [], // 多选
      is_right: false, // 答案是否正确
      is_answered: false, // 是否作答
      answerCoiledWrongCount: 0, // 答案连续做错次数
      questionData: {},
      palyIndex: 0,
    }
  },
  computed: {
    ...mapState({
      getCurrentPlayItem: (state) => state.course.currentPlayItem, // 课时数据
    }),
    ...mapGetters({
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      globThemeColorDisabled: 'designSetting/getGlobThemeColorDisabled',
    }),
    // 开启表示作答后不论对错即可继续学习
    answerPass() {
      return this.questionData.answer_pass
    },
    // 最大连续错题次数
    maxAnswerCount() {
      return this.questionData.answer_max_count
    },
  },
  options: { styleIsolation: 'shared' },
  methods: {
    // 获取弹题数据
    getQuestion() {
      this.loading = true
      this.radio = ''
      this.checkList = []
      this.is_right = false
      this.is_answered = false
      let cid = this.course_type == 4 ? this.course_id : 0
      this.$edu.api
        .getCourseQuestion(this.getCurrentPlayItem.course_id, {
          class_id: cid,
        })
        .then((res) => {
          this.questionData = res.data
          setTimeout(() => {
            this.loading = false
          }, 200)
        })
    },
    // 正确答案的 key 值
    correctAnswer(options) {
      let answer = options.filter((item) => item.is_right == 1)
      return answer.map((item) => item.key).toString()
    },
    // 提交
    handletQuestionAnswer(topic) {
      const type = topic.question_type
      const options = topic.options
      const currentAnswer = options.filter((item) => item.is_right == 1).map((item) => item.id)
      if (this.$edu.test.inArray(type, [1, 2])) {
        this.is_right = currentAnswer.toString() == this.radio
      } else if (this.$edu.test.inArray(type, [3, 4])) {
        let result =
          currentAnswer.length === this.checkList.length &&
          currentAnswer.every((a) => this.checkList.some((b) => a === b)) &&
          this.checkList.every((_b) => currentAnswer.some((_a) => _a === _b))
        this.is_right = result
      }

      // 连续打错次数
      if (this.is_right) {
        this.handletContinue()
      } else {
        this.answerCoiledWrongCount++
        this.is_answered = true
      }
    },
    // 下一题
    handletNextQuestion() {
      this.getQuestion()
    },
    // 继续学习
    handletContinue() {
      this.onClose()
      this.$emit('click')
    },
    // 播放时
    handlePlay(index) {
      this.palyIndex = index
    },
    /*打开弹窗*/
    onOpen() {
      this.visible = true
      this.getQuestion()
    },
    /*关闭弹窗*/
    onClose() {
      this.visible = false
    },
  },
}
</script>
<style lang="scss" scoped>
.loading-wrap {
  height: 500rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.question {
  padding-top: 30rpx;
  padding-bottom: 120rpx;
  &-header {
    padding: 0 30rpx;
    margin-bottom: 40rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: $edu-main-color;
    line-height: 44rpx;
    word-wrap: break-word;
    ::v-deep img {
      max-width: 100%;
    }
  }
  &-player {
    padding: 0 30rpx;
    margin-bottom: 40rpx;
  }
  &-body {
    padding: 0 30rpx;
    .question-radio,
    .question-select {
      .lebal {
        float: left;
      }
      .content {
        float: left;
        max-width: 400rpx;
        ::v-deep img {
          max-width: 100%;
        }
      }
    }
  }
  &-answer {
    padding: 0 30rpx;
    margin-bottom: 16rpx;
    display: flex;
    flex-wrap: wrap;
    font-size: 30rpx;
    font-weight: 400;
    line-height: 42rpx;
    .label {
      color: $edu-free-color;
    }
    .item {
      color: $edu-main-color;
    }
  }
  &-analyze {
    padding: 0 30rpx;
    margin-bottom: 16rpx;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 44rpx;
    .key {
      float: left;
      color: $edu-main-color;
    }
    .content {
      color: $edu-content-color;
      ::v-deep img {
        max-width: 100%;
      }
    }
  }
  &-icon {
    position: absolute;
    top: 16rpx;
    right: 16rpx;
    z-index: 99;
  }
  &-btn {
    width: 540rpx;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -270rpx;
    margin-top: 200rpx;
    z-index: 99;
    border-top: 1px solid #dddddd;
    background-color: #ffffff;
    border-radius: 0 0 14rpx 14rpx;
    .btn {
      height: 100rpx;
      font-size: 32rpx;
      font-weight: 400;
      @include text-color;
      line-height: 100rpx;
      text-align: center;
    }
  }
}
</style>
